<template>
  <div class="navbar-container">
    <el-menu
      :default-active="activeIndex"
      class="navbar"
      mode="horizontal"
      router
      background-color="#ffffff"
      text-color="#606266"
      active-text-color="#409eff"
    >
      <div class="menu-items">
        <el-menu-item index="/chat">
          <el-icon><ChatDotRound /></el-icon>
          <span>AI聊天</span>
        </el-menu-item>
        <el-menu-item index="/file/analyze">
          <el-icon><Document /></el-icon>
          <span>文件分析</span>
        </el-menu-item>
      </div>
      
      <div class="user-actions">
        <template v-if="userStore.isAuthenticated">
          <el-dropdown trigger="click" @command="handleCommand">
            <div class="user-dropdown-link">
              <el-avatar :size="32" class="user-avatar">{{ userStore.username?.charAt(0).toUpperCase() || 'U' }}</el-avatar>
              <span class="username">{{ userStore.username || '用户' }}</span>
              <el-icon class="el-icon--right"><arrow-down /></el-icon>
            </div>
            <template #dropdown>
              <el-dropdown-menu>
                <el-dropdown-item command="myDiscuss">
                  <el-icon><ChatLineSquare /></el-icon>
                  <span>我的讨论</span>
                </el-dropdown-item>
                <el-dropdown-item command="settings">
                  <el-icon><Setting /></el-icon>
                  <span>设置</span>
                </el-dropdown-item>
                <el-dropdown-item command="logout" divided>
                  <el-icon><SwitchButton /></el-icon>
                  <span>退出登录</span>
                </el-dropdown-item>
              </el-dropdown-menu>
            </template>
          </el-dropdown>
        </template>
        <template v-else>
          <router-link to="/login" class="login-link">登录</router-link>
          <router-link to="/register" class="register-link">注册</router-link>
        </template>
      </div>
    </el-menu>
  </div>
</template>

<script setup lang="ts">
import { computed } from 'vue';
import { useRoute, useRouter } from 'vue-router';
import { ElMessage, ElMessageBox } from 'element-plus';
import { 
  ArrowDown, 
  ChatDotRound, 
  ChatLineRound, 
  Document, 
  ChatLineSquare, 
  Setting, 
  SwitchButton 
} from '@element-plus/icons-vue';
import { useUserStore } from '../../stores/user';

const route = useRoute();
const router = useRouter();
const userStore = useUserStore();

// 计算当前激活的菜单项
const activeIndex = computed(() => {
  return route.path;
});

// 处理下拉菜单命令
const handleCommand = (command: string) => {
  switch (command) {
    case 'myDiscuss':
      router.push('/discuss/my');
      break;
    case 'settings':
      router.push('/settings');
      break;
    case 'logout':
      handleLogout();
      break;
  }
};

// 处理退出登录
const handleLogout = async () => {
  try {
    await ElMessageBox.confirm('确定要退出登录吗？', '提示', {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning'
    });
    
    userStore.clearUser();
    ElMessage.success('退出登录成功');
    router.push('/login');
  } catch (error) {
    // 用户取消退出登录，不做任何处理
  }
};
</script>

<style scoped>
.navbar-container {
  position: sticky;
  top: 0;
  z-index: 1000;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
  background-color: #fff;
}

.navbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 20px;
  height: var(--navbar-height);
  width: 100%;
}

.menu-items {
  display: flex;
  justify-content: center;
}

.menu-items .el-menu-item {
  display: flex;
  align-items: center;
  height: var(--navbar-height);
  padding: 0 20px;
  font-size: 15px;
}

.menu-items .el-icon {
  margin-right: 5px;
  font-size: 18px;
}

.user-actions {
  display: flex;
  align-items: center;
}

.user-dropdown-link {
  display: flex;
  align-items: center;
  cursor: pointer;
  padding: 5px 10px;
  border-radius: 20px;
  transition: background-color 0.3s;
}

.user-dropdown-link:hover {
  background-color: #f5f7fa;
}

.user-avatar {
  background-color: #409eff;
  color: #fff;
  font-weight: bold;
}

.username {
  margin: 0 8px;
  color: var(--text-primary);
}

.login-link, .register-link {
  text-decoration: none;
  margin-left: 15px;
  padding: 8px 16px;
  border-radius: 20px;
  transition: all 0.3s;
  font-size: 14px;
}

.login-link {
  color: var(--primary-color);
  border: 1px solid var(--primary-color);
}

.login-link:hover {
  background-color: var(--primary-light);
}

.register-link {
  background-color: var(--primary-color);
  color: #fff;
  border: 1px solid var(--primary-color);
}

.register-link:hover {
  background-color: #66b1ff;
  border-color: #66b1ff;
}

:deep(.el-dropdown-menu__item) {
  display: flex;
  align-items: center;
}

:deep(.el-dropdown-menu__item .el-icon) {
  margin-right: 8px;
}

@media (max-width: 768px) {
  .navbar {
    padding: 0 10px;
  }
  
  .menu-items .el-menu-item {
    padding: 0 10px;
  }
  
  .username {
    display: none;
  }
  
  .login-link, .register-link {
    padding: 6px 12px;
    margin-left: 10px;
  }
}
</style> 